<template>
  <section class="xlyz-consult-manage">
    <section class="xlyz-consult-manage-title">心理咨询详情</section>

    <section ref="xlyzconsult" v-loading="loading" class="xlyz-consult-manage-main">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <section class="top">
            <span class="type" :class="{'q': item.questionAnswer == '1', 'a': item.questionAnswer == '2'}">{{ item.questionAnswer == '1' ? '问' : '答' }}</span>
            <span class="name">{{ item.questionAnswer == '1' ? '咨询人' : '回复人' }}：{{ item.userName || '' }}</span>
            <el-button v-if="item.questionAnswer == '2'" type="primary" size="mini" icon="el-icon-edit" circle @click="handleEdit(item)" />
          </section>
          <p class="time">{{ item.questionAnswer == '1' ? '咨询时间' : '回复时间' }}：{{ item.crtTime || '' }}</p>
          <p class="desc">{{ item.questionAnswer == '1' ? '咨询内容' : '回复内容' }}：{{ item.commentContent || '' }}</p>
          <section v-if="item.userImgs && item.userImgs.length > 0" class="images">
            <el-image v-for="(image, i) in item.imageList" :key="i" :src="image" :preview-src-list="item.imageList">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline" />
              </div>
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-loading" />
              </div>
            </el-image>
          </section>
        </li>
      </ul>

      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="80px">
        <el-form-item label="回复" prop="reply">
          <el-input v-model="form.commentContent" :autosize="{ minRows: 4, maxRows: 6}" type="textarea" placeholder="请输入回复内容" />
        </el-form-item>
        <el-form-item label="上传图片">
          <upload-images ref="images" :key="time" :img-data="form.userImgs.split(',')" class="editor-upload-btn" />
        </el-form-item>
        <el-form-item label>
          <el-button style="padding: 8px 30px;" type="primary" @click="handleSubmit()">确定</el-button>
        </el-form-item>
      </el-form>
    </section>

    <section class="xlyz-consult-manage-footer">
      <el-button style="padding: 10px 30px;" @click="() =>{$router.back()}">返 回</el-button>
    </section>
  </section>
</template>
<script>
import UploadImages from './../../../source/components/UploadImages'
import { query, update, get, replay } from './../api'
export default {
  name: 'XlyzConsultManage',
  components: { UploadImages },
  data() {
    return {
      loading: false,
      view: '/API-DOCUMENT/document/file/download?id=',
      list: [],
      form: {
        id: '',
        commentContent: '',
        userImgs: ''
      },
      rules: {
        commentContent: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
      },
      id: '',
      rootid: '',
      state: 'replay',
      time: new Date().getTime()
    }
  },
  created() {
    if (!this.$route.query.i) {
      this.$message({
        showClose: true,
        message: '参数异常！',
        type: 'warning',
        onClose: () => {
          this.$router.back()
        }
      })
    } else {
      this.id = this.$route.query.i
      this.form.id = this.$route.query.i
      this.getList()
    }
  },
  methods: {
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.state === 'replay') {
            const images = this.$refs.images.list
            if (images && images.length > 0) {
              this.form.userImgs = images.join(',')
            }
            const params = {
              consultativeType: 'XLYZ',
              questionAnswer: '2',
              commentRootId: this.rootid,
              commentParentId: this.rootid,
              commentContent: this.form.commentContent,
              userImgs: this.form.userImgs
            }
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.3)'
            })
            return new Promise((resolve, reject) => {
              replay(params).then(res => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '回复成功',
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.form = {
                      commentContent: '',
                      userImgs: ''
                    }
                    this.$refs.images.list = []
                    this.getList()
                  }
                })
                resolve()
              }).catch(error => {
                loading.close()
                reject(error)
              })
            })
          } else {
            const images = this.$refs.images.list
            if (images && images.length > 0) {
              this.form.userImgs = images.join(',')
            }
            const params = {
              id: this.form.id,
              commentContent: this.form.commentContent,
              userImgs: this.form.userImgs
            }
            const loading = this.$loading({
              lock: true,
              text: '请稍后',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.3)'
            })
            return new Promise((resolve, reject) => {
              update(params).then(res => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.form = {
                      id: '',
                      commentContent: '',
                      userImgs: ''
                    }
                    this.state = 'replay'
                    this.$refs.images.list = []
                    this.getList()
                  }
                })
                resolve()
              }).catch(error => {
                loading.close()
                reject(error)
              })
            })
          }
        }
      })
    },

    handleEdit(item) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: item.id }).then(res => {
          loading.close()
          const data = res.data.data
          for (const key in this.form) {
            this.form[key] = data[key] || ''
          }
          this.time = new Date().getTime()
          this.state = 'edit'
          this.$refs.xlyzconsult.scrollTop = this.$refs.xlyzconsult.scrollHeight
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },

    getList() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      const url = '/backend/consultativeLog/get'
      return new Promise((resolve, reject) => {
        query({
          consultativeType: 'XLYZ',
          commentRootId: this.id
        }, url).then(res => {
          loading.close()
          if (res.data.data) {
            res.data.data.forEach(item => {
              let imgList = []
              if (item.userImgs) {
                imgList = item.userImgs.split(',').map((v) => {
                  return this.view + v
                })
              }
              item['imageList'] = imgList
            })
          }
          this.list = res.data.data || []
          this.time = new Date().getTime()
          if (this.list && this.list.length > 0) {
            this.rootid = this.list[0].commentRootId
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/mixin.scss';
.xlyz-consult-manage {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;

  .xlyz-consult-manage-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .xlyz-consult-manage-main {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding: 0 10px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        padding: 0 10px;
        margin-bottom: 10px;
        box-shadow: 0 0 10px #e2e2e2;
        .top {
          height: 50px;
          line-height: 50px;
          .type {
            font-size: 14px;
            color: #fff;
            padding: 5px;
            &.q {
              background-color: green;
            }
            &.a {
              background-color: red;
            }
          }
          .name {
            font-size: 14px;
            color: #606266;
            margin-left: 10px;
          }

          .el-button {
            float: right;
            margin-top: 10px;
          }
        }

        .time,
        .desc {
          font-size: 14px;
          padding-left: 30px;
        }

        .images {
          padding-left: 30px;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .el-image {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            margin-bottom: 10px;
            .image-slot {
              background-color: #f5f7fa;
            }
            .el-icon-circle-close {
              color: #fff;
            }
          }
        }
      }
    }
  }

  .xlyz-consult-manage-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
